<template>
  <div class="age">
   <div class="top">
     <p class="title">年龄比例</p>
     <p class="bg"></p>
   </div>
   <div class="charts" ref="charts"></div>
 </div>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import * as echarts from 'echarts'
 
 const charts = ref()
 
 onMounted(()=>{
   const myCharts = echarts.init(charts.value)
   myCharts.setOption({
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      top: 40,
      right: 30,
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['50%', '90%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          position: 'inside',
          color: '#fff'
        },
        // 文字放大
        emphasis: {
          label: {
            show: true,
            fontSize: 24,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '军事' },
          { value: 735, name: '新闻' },
          { value: 580, name: '娱乐' },
          { value: 484, name: '财经' },
          { value: 300, name: '直播' }
        ]
      }
    ],
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0
    }
   })
 })
 
 
 
 
 </script>
 
 <style lang="scss" scoped>
   .age {
     width: 100%;
     height: 100%;
     background: url(../../images/dataScreen-main-lb.png) no-repeat;
     background-size: 100% 100%;
     .top {
       font-size: 20px;
       color: #fff;
       .title {
         margin-left: 20px;
         margin-bottom: 10px;
         margin-top: 10px;
       }
       .bg {
         background: url(../../images/dataScreen-title.png) no-repeat;
         background-size: 100% 100%;
         width: 68px;
         height: 7px;
         margin-left: 20px;
         
       }
       .txt-right {
         text-align: right;
         margin-right: 20px;
         span {
           color: yellowgreen;
         }
       }
     }
     .charts {
       width: 100%;
       height: 240px; 
     }
   }
 </style>
 